<template>
	<view class="terminal">
		<view class="flex terminal__item">


			<view class="terminal__item-num" @click="goStatistic()">
				<view class="terminal__tip">终端台数(台)</view>
				<view class="terminal__text-center">{{terminalData.totalNum}}</view>
				<view class="terminal__sub-item">
					<view class="">
						<view class="">{{terminalData.yesterdayActiveNum}}</view>
						<view class="">昨日激活</view>
					</view>
					<view class="">
						<view class="">{{terminalData.yesterdayBindNum}}</view>
						<view class="">昨日绑定</view>
					</view>
				</view>

			</view>
			<view class="terminal__item-active" @click="goActiveStatistic()">
				<view class="terminal__tip">总激活(台)</view>
				<view class="terminal__text-center">{{terminalData.totalActiveNum}}</view>
				<view class="terminal__sub-item">
					<view class="">
						<view class="">{{terminalData.myActiveNum}}</view>
						<view class="">直营激活</view>
					</view>
					<view class="">
						<view class="">{{terminalData.subActiveNum}}</view>
						<view class="">下级激活</view>
					</view>
				</view>

			</view>
		</view>

		<u-cell-group class="mt-20 terminal__container" :border="false">
			<view class="terminal__sub">
				<u-cell-item @click="goTerminalState()" :title-style="{ color: '#333333' }" title="终端状态"
					:border-bottom="false" bg-color="#f6f6f6" class="">

					<image :title-style="{ color: '#333333' }" class="icon mr-20" slot="icon"
						src="http://118.31.238.190/home/img_terminal_status.png" />
				</u-cell-item>
			</view>
			<view class="terminal__sub">
				<u-cell-item @click="goTerminalQueryIssue()" :title-style="{ color: '#333333' }" title="终端分拨"
					:border-bottom="false" bg-color="#f6f6f6">

					<image :title-style="{ color: '#333333' }" class="icon mr-20" slot="icon"
						src="http://118.31.238.190/home/img_terminal_allocated.png" />
				</u-cell-item>
			</view>
			<view class="terminal__sub">

				<u-cell-item @click="goTerminalQueryRecover()" :title-style="{ color: '#333333' }" title="终端回拨"
					:border-bottom="false" bg-color="#f6f6f6">

					<image :title-style="{ color: '#333333' }" class="icon mr-20" slot="icon"
						src="http://118.31.238.190/home/img_terminal_return.png" />
				</u-cell-item>
			</view>
		</u-cell-group>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				terminalData: {}

			}
		},
		mounted() {
			this.terminalTopStat();
		},
		methods: {
			terminalTopStat() {
				this.$zx.terminal_api.terminalTopStat().then((data) => {
					console.log("data=" + JSON.stringify(data))
					this.terminalData = data;
				});
			},
			goStatistic() {
				this.$u.route('packageB/pages/main/terminal/amountStatistic')
			},
			goActiveStatistic() {
				this.$u.route('packageB/pages/main/terminal/activeStatistic')
			},
			goTerminalState() {
				this.$u.route('packageB/pages/main/terminal/terminalStateList')
			},
			goTerminalQueryIssue() {
				this.$u.route('packageB/pages/main/terminal/terminalInfoQueryIssueList')
			},
			goTerminalQueryRecover() {
				this.$u.route('packageB/pages/main/terminal/terminalInfoQueryRecoverList')
			}

		},
	}
</script>

<style scoped lang="scss">
	.terminal {
		background-color: white;
		height: 100vh;

		&__item {
			height: 268rpx;
			padding-top: 20rpx;
			display: flex;
			justify-content: space-around;
			color: white;
		}

		&__item-num {
			background-image: url("http://118.31.238.190/home/img_terminal_bg_2.png");
			width: 334rpx;
			background-position: 50% 50%;

			padding: 20rpx;
			border-radius: 20rpx;
		}

		&__item-active {
			background-image: url("http://118.31.238.190/home/img_terminal_bg_1.png");
			width: 334rpx;
			background-position: 50% 50%;

			padding: 20rpx;
			border-radius: 20rpx;
		}

		&__tip {
			font-size: 12px;
		}

		&__text-center {
			text-align: center;
			font-size: 22px;
			font-weight: bold;
			margin-top: 30rpx;
		}

		&__sub-item {
			// margin-top: 30rpx;
			display: flex;
			text-align: center;

			justify-content: space-between;

		}

		.icon {
			width: 60rpx;
			height: 60rpx;
		}

		&__container {
			padding: 20rpx;
		}

		&__sub {
			margin: 0 20rpx 20rpx 20rpx;
			border-radius: 20rpx;

		}
	}
</style>